<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('角色列表')" />
</head>
<body class="gray-bg">
<!--<div class="container-div">
	<div class="row">
		<div class="col-sm-12 search-collapse">
			<form id="role-form">
				<div class="select-list">
					<ul>
						<li>
							角色名称：<input type="text" name="roleName"/>
						</li>
						<li>
							权限字符：<input type="text" name="roleKey"/>
						</li>
						<li>
							角色状态：<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
							<option value="">所有</option>
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
						</select>
						</li>
						<li class="select-time">
							<label>创建时间： </label>
							<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
							<span>-</span>
							<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
		</div>

		<div class="btn-group-sm" id="toolbar" role="group">
			<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:role:add">
				<i class="fa fa-plus"></i> 新增
			</a>
			<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:role:edit">
				<i class="fa fa-edit"></i> 修改
			</a>
			<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:role:remove">
				<i class="fa fa-remove"></i> 删除
			</a>
			<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:role:export">
				<i class="fa fa-download"></i> 导出
			</a>
		</div>

		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table"></table>
		</div>
	</div>
</div>-->
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>折线图</h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>
						<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
							<i class="fa fa-wrench"></i>
						</a>
						<ul class="dropdown-menu dropdown-user">
							<li><a href="javascript:;">选项1</a>
							</li>
							<li><a href="javascript:;">选项2</a>
							</li>
						</ul>
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="echarts-line-chart" ></div>
				</div>
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table"></table>
				</div>
			</div>
		</div>

		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>折线图</h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>
						<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
							<i class="fa fa-wrench"></i>
						</a>
						<ul class="dropdown-menu dropdown-user">
							<li><a href="javascript:;">选项1</a>
							</li>
							<li><a href="javascript:;">选项2</a>
							</li>
						</ul>
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="echarts-line-chart1" ></div>
				</div>
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table1"></table>
				</div>
			</div>
		</div>


	</div>

	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>折线图</h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>
						<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
							<i class="fa fa-wrench"></i>
						</a>
						<ul class="dropdown-menu dropdown-user">
							<li><a href="javascript:;">选项1</a>
							</li>
							<li><a href="javascript:;">选项2</a>
							</li>
						</ul>
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="echarts-3d-chart" ></div>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: echarts-gl" />
<!--import * as echarts from 'echarts';-->
<!--import 'echarts-gl';-->
<script th:inline="javascript">
	var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
	var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
	var prefix = ctx + "system/role";

	var ys  = [];
	var xs = [];
	var ys1  = [];
	var xs1 = [];
	var ymin =0;
	var ymax =0;
	let dataList = [];
	var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
		'7a', '8a', '9a', '10a', '11a',
		'12p', '1p', '2p', '3p', '4p', '5p',
		'6p', '7p', '8p', '9p', '10p', '11p'];
	var days = ['Saturday', 'Friday', 'Thursday',
		'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
	var data = [ [0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6] ];

	$(function() {
		queryDeptTree();
		var options = {
			id:"bootstrap-table",
			//url: prefix + "/list",
			data: dataList,
			/*createUrl: prefix + "/add",
			updateUrl: prefix + "/edit/{id}",
			removeUrl: prefix + "/remove",
			exportUrl: prefix + "/export",*/
			modalName: "【设备列表】",
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			//detailView: true,
			/*onExpandRow : function(index, row, $detail) {
                initChildTable(index, row, $detail);
            },*/
			columns: [{
				checkbox: true
			},
				{
					field: 'time',
					title: 'time'
				},
				{
					field: 'mass1',
					title: 'mass1'
				},
				{
					field: 'mass2',
					title: 'mass2'
				},
				{
					field: 'mass3',
					title: 'mass3'
				},
				{
					field: 'mass4',
					title: 'mass4'
				}]
		};
		$.table.init(options);
		var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
		var lineoption = {
			title : {
				text: '数据报表'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['A电子','B电子']
			},
			grid:{
				x:40,
				x2:40,
				y2:24,
				left: "2%",
				containLabel: true

			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : xs //['周一','周二','周三','周四','周五','周六','周日']
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value}'
					}
				}
			],
			series : [
				{
					name:'A电子',
					type:'line',
					data: ys, //[11, 11, 15, 13, 12, 13, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				}/*,
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					markPoint : {
						data : [
							{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine : {
						data : [
							{type : 'average', name : '平均值'}
						]
					}
				}*/
			]
		};
		lineChart.setOption(lineoption);
		$(window).resize(lineChart.resize);

		var options = {
			id:"bootstrap-table1",
			//url: prefix + "/list",
			data: dataList,
			/*createUrl: prefix + "/add",
			updateUrl: prefix + "/edit/{id}",
			removeUrl: prefix + "/remove",
			exportUrl: prefix + "/export",*/
			modalName: "【设备列表】",
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			//detailView: true,
			/*onExpandRow : function(index, row, $detail) {
                initChildTable(index, row, $detail);
            },*/
			columns: [{
				checkbox: true
			},
				{
					field: 'time',
					title: 'time'
				},
				{
					field: 'mass1',
					title: 'mass1'
				},
				{
					field: 'mass2',
					title: 'mass2'
				},
				{
					field: 'mass3',
					title: 'mass3'
				},
				{
					field: 'mass4',
					title: 'mass4'
				}]
		};
		$.table.init(options);
		var lineChart1 = echarts.init(document.getElementById("echarts-line-chart1"));
		var lineoption1 = {
			title : {
				text: '数据报表'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['A电子','B电子']
			},
			grid:{
				x:40,
				x2:40,
				y2:24,
				left: "2%",
				containLabel: true

			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : xs1 //['周一','周二','周三','周四','周五','周六','周日']
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value}'
					}
				}
			],
			series : [
				{
					name:'A电子',
					type:'line',
					data: ys1, //[11, 11, 15, 13, 12, 13, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				}/*,
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					markPoint : {
						data : [
							{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine : {
						data : [
							{type : 'average', name : '平均值'}
						]
					}
				}*/
			]
		};
		lineChart1.setOption(lineoption1);
		$(window).resize(lineChart1.resize);

		var ddoption = {
			tooltip: {},
			visualMap: {
				max: 20,
				inRange: {
					color: [
						'#313695',
						'#4575b4',
						'#74add1',
						'#abd9e9',
						'#e0f3f8',
						'#ffffbf',
						'#fee090',
						'#fdae61',
						'#f46d43',
						'#d73027',
						'#a50026'
					]
				}
			},
			xAxis3D: {
				type: 'category',
				data: hours
			},
			yAxis3D: {
				type: 'category',
				data: days
			},
			zAxis3D: {
				type: 'value'
			},
			grid3D: {
				boxWidth: 200,
				boxDepth: 80,
				viewControl: {
					// projection: 'orthographic'
				},
				light: {
					main: {
						intensity: 1.2,
						shadow: true
					},
					ambient: {
						intensity: 0.3
					}
				}
			},
			series: [
				{
					type: 'bar3D',
					data: data.map(function (item) {
						return {
							value: [item[1], item[0], item[2]]
						};
					}),
					shading: 'lambert',
					label: {
						fontSize: 16,
						borderWidth: 1
					},
					emphasis: {
						label: {
							fontSize: 20,
							color: '#900'
						},
						itemStyle: {
							color: '#900'
						}
					}
				}
			]
		};
		var ddChart = echarts.init(document.getElementById("echarts-3d-chart"));
		ddChart.setOption(ddoption);
		$(window).resize(ddChart.resize);

	});

	/* 角色管理-分配数据权限 */
	function authDataScope(roleId) {
		var url = prefix + '/authDataScope/' + roleId;
		$.modal.open("分配数据权限", url);
	}

	/* 角色管理-分配用户 */
	function authUser(roleId) {
		var url = prefix + '/authUser/' + roleId;
		$.modal.openTab("分配用户", url);
	}

	/* 角色状态显示 */
	function statusTools(row) {
		if (row.status == 1) {
			return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.roleId + '\')"></i> ';
		} else {
			return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.roleId + '\')"></i> ';
		}
	}

	/* 角色管理-停用 */
	function disable(roleId) {
		$.modal.confirm("确认要停用角色吗？", function() {
			$.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 1 });
		})
	}

	/* 角色管理启用 */
	function enable(roleId) {
		$.modal.confirm("确认要启用角色吗？", function() {
			$.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 0 });
		})
	}

	function queryDeptTree()
	{
		/*var url = ctx + "/serial/analysis";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }*/
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "serial/analysis",
			data : {
				"roleId": ""
			},
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(data) {
				dataList = data.data;
				data.data.forEach(x=>{
					xs.push(x.time)
					ys.push(x.mass2)
					xs1.push(x.time)
					ys1.push(x.mass3)
				});
				/*ys = data.data.ys1;
				ymin = ys[0]
				ymax = ys[ys.length-1]*/
				$.operate.successCallback(data);
			}
		});
	}
</script>
</body>
</html>